<template>
  <div class="cropper-image-upload-page">
    <div class="cropper-image" @click="chooseImage" @mouseenter="mouseenterHandler" @mouseleave="mouseleaveHandler">
      <i v-if="!imgUrl" class="el-icon-plus"></i>
      <img v-else :src="imgUrl" alt="裁剪图片">
      <div v-show="imgUrl && maskShow"  class="mask"><i @click.stop="clearImg" class="el-icon-delete"></i></div>
      <input type="hidden" v-model="imgUrl"  placeholder="请选择图片">
    </div>
    <el-dialog
      title="图片上传"
      :visible.sync="imageDialog"
      width="900px"
    >
      <cropper-image-upload :imgUrl.sync="imgUrl"  @uploadImgSuccess="uploadImgSuccessHandler"></cropper-image-upload>
    </el-dialog>
  </div>
</template>

<script>
import CropperImageUpload from './cropper-image-upload.vue'
export default {
  name: 'CropperImageUploadIndex',
  components:{
    CropperImageUpload
  },
  props:{
    imgUrl:{
      type: String,
      required: true
    }
  },
  data(){
    return {
      imageDialog: false,
      maskShow: false
    }
  },
  methods:{
    clearImg(){
      this.$emit('update:imgUrl','')
    },
    chooseImage(){
      this.imageDialog = true
    },
    mouseenterHandler(){
      this.maskShow = true
    },
    mouseleaveHandler(){
      this.maskShow = false
    },
    uploadImgSuccessHandler(url){
      this.$emit('update:imgUrl',url)
    }
  }
}
</script>

<style lang="scss" scoped>
.cropper-image-upload-page{
  .cropper-image{
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;
    width:180px;
    height:90px;
    cursor: pointer;
    border:1px dashed rgb(230,230,230);
    >i{
      font-size:28px;
    }
    >img{
      width:100%;
      height:100%;
    }
    .mask{
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top:0;
      left:0;
      z-index: 999;
      background: rgba(0, 0, 0, 0.25);
      width:100%;
      height:100%;
      i{
        color:#fff;
        font-size: 18px;

      }
    }
  }
}
</style>
